<!--
	作者：2575202388@qq.com
	时间：2018-10-14
	描述：基础设置顶部
-->

<template>
	<div>
		<div style="padding-top:10px;">
			<Form ref="params"  :label-width="150" label-position="right">		
				<div style="float:left;width:100%;">
					<FormItem label="图片上传说明:">
						<label>图片大小不能大于2M，宽高比例为：1:2.5为最佳</label>
					</FormItem>
				</div>

				<div style="width:100%;float:left;text-align: left;margin-top:10px;">
				    <div style="float:left;">
						<FormItem label="环西天地顶部图片">
							<Upload
								ref="upload2"
								:show-upload-list="false"
								:on-success="handleSuccess"
								:format="['jpg','jpeg','png']"
								:max-size="2048"
								:on-format-error="handleFormatError"
								:on-exceeded-size="handleMaxSize" 
								type="drag"
								:action="action"
								style="display: inline-block;width:80px;">
								<div style="width: 80px;height:80px;line-height: 80px;">
									<Icon type="ios-camera" size="20"></Icon>
								</div>
							</Upload>
						</FormItem>
					</div>
					<template v-if="photos!='' && photos!=null  && photos!=undefined">
						<div style="float:left;padding-left:150px;">
							<div style="width: 120px;height:auto;margin-right:10px;float:left;">
								<div style="width: 120px;height:auto;float:left;">
									<img style="width:120px;height: auto;" :src="imgurl" @click="handleView()">
								</div>
								<div style="text-align:center;float:left;width: 120px;">
									<Icon style="font-size: 20px;" type="ios-trash-outline" @click.native="handleRemove()"></Icon>
								</div>
							</div>
						</div>
					</template>
				</div>
				

				<Modal title="图片预览" v-model="visible">
			        <img :src="imgurl" v-if="visible" style="width: 100%">
			    </Modal>
		
			</Form>	
		</div>
		<div style="width:100%;height: 60px;line-height: 60px;float:left;margin-bottom: 20px;">
			<Button type="info" style="float:left;margin-left:10%;" v-on:click="save()">保存</Button>
		</div>	
	</div>
</template>
<script>
	import _config from "../../../../config/config"
	export default {
		name:"home",
		data() {			
			return {
				visible: false,
				imgurl:'',
				photos: '',
				action:_config._ADMIN_SERVER+"/readbook/upload/filesUploadHxtdImage.html"
			}
		},
		components: {
			
		},
		methods: {
			handleSuccess(res, file) {
			    var photos=res[0].FILE_PATH;
			    var imgurl=_config._ADMIN_SERVER+"/readbook/"+res[0].FILE_PATH;
			    this.photos=photos;
			    this.imgurl=imgurl;
			},
			handleView() {
			    this.visible = true;
			},        
			handleRemove() {
			  	this.photos="";
				this.imgurl="";
			},
            handleFormatError (file) {
                this.$Notice.warning({
                    title: '文件上传失败',
                    desc: '文件' + file.name + '无法上传, 上传文件请选择jpg or png.'
                });
            },
            handleMaxSize (file) {
                this.$Notice.warning({
                    title: '提示',
                    desc: '文件  ' + file.name + ' 太大, 上传的文件不能超过2M.'
                });
            },

			
            //查询顶部图片
            getimageset(){
            	this.$http.get("/host/readbook/jfych/getTopImagePic.html")
				.then(datas => {
					var photos=datas.photos;
					var imgurl=_config._ADMIN_SERVER+"/readbook/"+datas.photos;
					this.photos=photos;
                	this.imgurl=imgurl;
				});	
           },
            
            
            
            save(){
				var photos=this.photos;
				const params={
					photos:photos
				}
				this.$http.post("/host/readbook/jfych/InsertTopImagePic.html",params)
				.then(datas => {
					if(datas){
						this.$Modal.success({
                            title: "提示",
                            content: "保存成功"
                        });	
					}else{
						this.$Modal.error({
                            title: "提示",
                            content:"保存失败"
                        });	
					}
				});
			}
            
            
		},
		mounted(){	
			//获取图片信息
			this.getimageset();
		},
		watch:{
			
		},
		computed: {
			user: function() {
				return this.$store.state.app.user;
			}
		},
	}
</script>

<style>
</style>



